<template>
  <div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane class="eltab" label="管理咨询" name="first">
        <div class="table" style="width: 100%; height: 100%">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="序号" width="180">
            </el-table-column>
            <el-table-column prop="createTime" label="录入日期" width="180">
            </el-table-column>
            <el-table-column prop="type" label="新闻类型"> </el-table-column>
            <el-table-column prop="top" label="置顶"> </el-table-column>
            <el-table-column prop="viewCount" label="浏览次数">
            </el-table-column>
            <el-table-column prop="title" label="标题"> </el-table-column>
            <el-table-column prop="address" label="操作">
              <template slot-scope="scope">
                <el-row>
                  <el-button>置顶</el-button>
                  <el-button type="success" @click="editXinwen(scope.row.id)"
                    >编辑</el-button
                  >
                  <el-button type="danger" @click="detalesxinwen(scope.row.id)"
                    >删除</el-button
                  >
                </el-row>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="100"
            layout="prev, pager, next"
            :total="1000"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="新增咨询" name="second" style="border: none">
        <div class="second-box">
          <div class="secbox-tob">
            <div class="tob-box1">
              <h3>编辑标题</h3>
              <el-input
                v-model="title"
                style="width: 445px; height: 60px"
                placeholder="请输入新闻标题"
              ></el-input>
            </div>
            <div class="tob-box1">
              <div class="xinwenleixing" style="margin-bottom: 20px">
                新闻类型
              </div>
              <el-radio v-model="type" label="1">公司新闻</el-radio>
              <el-radio v-model="type" label="2">行业新闻</el-radio>
            </div>
            <div class="tob-box1">
              <div class="xinwenleixing" style="margin-bottom: 20px">置顶</div>
              <el-row>
                <el-button v-model="top" type="primary">是</el-button>
                <el-button v-model="top">否</el-button>
              </el-row>
            </div>
            <div class="tob-box1">
              <div class="xinwenleixing">上传封面</div>
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
            <div class="tob-box2">
              <div style="display: flex; margin-bottom: 20px">
                <div style="margin-right: 10px; width: 52px; font-size: 12px">
                  发布日期
                </div>
                <el-input
                  v-model="inputs1"
                  style="width: 70px; height: 24px"
                ></el-input>
              </div>
              <div style="display: flex; margin-bottom: 20px">
                <div style="margin-right: 10px; width: 52px; font-size: 12px">
                  来源
                </div>
                <el-input
                  v-model="inputs2"
                  style="width: 70px; height: 24px"
                ></el-input>
              </div>
              <div style="display: flex; margin-bottom: 20px">
                <div style="margin-right: 10px; width: 52px; font-size: 12px">
                  作者
                </div>
                <el-input
                  v-model="inputs3"
                  style="width: 70px; height: 24px"
                ></el-input>
              </div>
            </div>
          </div>
          <div
            style="
              width: 96%;
              height: 780px;
              border-bottom: 2px solid #eee;
              padding: 0 2%;
            "
          >
            <h3>编辑内容</h3>
            <div>
              <el-input
                class="bj-inp"
                v-model="content"
                placeholder="请输入新闻内容"
                style="width: 100%; height: 220px"
              ></el-input>
            </div>
            <el-row style="margin: 20px 500px">
              <el-button style="width: 120px; height: 40px">预览</el-button>
              <el-button
                @click="TJCollectionForm"
                type="primary"
                style="width: 120px; height: 40px"
                >提交</el-button
              >
            </el-row>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 修改用户的对话框 -->
    <el-dialog title="修改" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="标题" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新闻类型" :label-width="formLabelWidth">
          <el-input v-model="form.content" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="okXinwen">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 删除弹出框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>确定删除吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="okdialogVisible()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { deletes } from "@/request/http";
// import qs from 'qs';
import {
  getxinwen,
  postxinwen,
  putxinwen,
  deletesxinwen,
} from "../../request/api/xinwen";
export default {
  data() {
    return {
      ids: 0,
      editid: 0,
      inputs: "",
      inputs1: "",
      inputs2: "",
      inputs3: "",
      imageUrl: "",
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      activeName: "first",
      tableData: [
        {
          date: "1",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "3",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "4",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      title: "",
      content: "",
      type: 0,
      top: 0,
      dialogFormVisible: false,
      dialogVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        content: "",
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    // 添加数据
    async TJCollectionForm() {
      let res = await postxinwen("/admin/news", {
        content: this.content,
        id: 0,
        pictureId: 0,
        publish: 0,
        sort: 0,
        source: "",
        title: this.title,
        top: this.top,
        type: this.type,
      });
      console.log("添加数据", res);
      this.getxw(1);
      this.$message("添加成功");
    },
    // 修改功能
    editXinwen(e) {
      this.dialogFormVisible = true;
      console.log(e);
      this.editid = e;
    },
    async okXinwen() {
      this.dialogFormVisible = false;
      try {
        let res = await putxinwen("/admin/news", {
          author: "",
          content: this.form.content,
          id: this.editid,
          pictureId: 0,
          publish: 0,
          sort: 0,
          source: "",
          title: this.form.title,
          top: 0,
          type: 0,
        });
        console.log("修改数据", res);
        this.getxw();
        this.$message("修改成功");
      } catch (err) {
        console.log("errr", err);
      }
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 数据接口
    async getxw(page, pageSize) {
      let res = await getxinwen(`/admin/news/page?page=${page}&pageSize=6`);
      console.log("接口res", res.data.rows);
      this.tableData = res.data.rows;
    },
    // 删除接口
    detalesxinwen(idss) {
      this.dialogVisible = true;
      // let res = await deletesxinwen(`/admin/news/${ids}`)
      // this.getxw(1)
      this.ids = idss;
    },
    async okdialogVisible() {
      this.dialogVisible = false;
      let res = await deletesxinwen(`/admin/news/${this.ids}`);
      this.getxw(1);
      this.$message("删除成功");
    },

    // 分页功能
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.getxw(val);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.getxw(val);
    },
  },
  created() {
    this.getxw(1);
  },
};
</script>
<style lang="scss" scoped>
:deep .el-tabs--card > .el-tabs__header .el-tabs__item {
  width: 100px;
  height: 40px;
  text-align: center;
  margin-right: 20px;
  border: none;
}

:deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: none;
}

:deep .el-pagination {
  text-align: right;
}

:deep .el-button {
  width: 55px;
  height: 25px;
  // text-align: center;
  padding: 0;
}

:deep .el-table--enable-row-transition .el-table__body td.el-table__cell {
  height: 100px;
}

:deep .bj-inp input {
  height: 220px;
}

:deep .el-tabs__header {
  margin: 0;
}

.secbox-tob {
  width: 96%;
  height: 150px;
  // background: red;
  border-bottom: 2px solid #eee;
  display: flex;
  padding: 0 2%;
  justify-content: space-between;
}

.tob-box1 {
  // margin-right: 150px;
}

.second-box {
  margin-top: 0px;
  background: #fff;
  padding: 20px 0;
}

// 上传封面样式
.avatar-uploader .el-upload {
  border: 1px dashed #333;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 128px;
  line-height: 128px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.secbox-bot {
  width: 96%;
  height: 780px;
  // background: red;
  border-bottom: 2px solid #eee;
  display: flex;
  padding: 0 2%;
  justify-content: space-between;
}

:deep .el-tabs__item {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background-color: #fff;
  margin-right: 20px;
  width: 70px;
}

:deep .el-tabs__item.is-active {
  background-color: #2567ff;
  color: #fff;
}
</style>